<template>
    <v-app>
        <v-app-bar app>
            <v-toolbar-title class="headline text-uppercase">
                <span>Welcome to ZYCtools</span>
            </v-toolbar-title>
            <v-spacer/>
            <v-toolbar-items>
                <v-btn icon @click="goto('/')">
                    <v-icon>home</v-icon>
                </v-btn>
                <v-btn icon>
                    <v-icon>reorder</v-icon>
                </v-btn>
                <v-btn icon>
                    <v-icon>view_module</v-icon>
                </v-btn>
                <v-btn text @click="goto('/test')">
                    Test
                </v-btn>
            </v-toolbar-items>
        </v-app-bar>
        <v-content>
            <router-view/>
        </v-content>
    </v-app>
</template>

<script>
    import Home from './views/home/Home';

    export default {
        name: 'App',
        components: {
            Home,
        },
        data: () => ({
            arrangement: 'reorder'
        }),
        methods: {
            goto(link) {
                this.$router.push(link);
            }
        }
    };
</script>

<style>
    .test-link {
        text-decoration: none;
    }
</style>
